<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title>在线考试界面</title>
    <link href="/css/main.css" rel="stylesheet" type="text/css"/>
    <link href="/css/test.css" rel="stylesheet" type="text/css"/>
    <style>
        .hasBeenAnswer {
            background: #5d9cec;
            color: #fff;
        }

        .reading h2 {
            width: 100%;
            margin: 20px 0 70px;
            text-align: center;
            line-height: 2;
            font-size: 20px;
            color: #59595b;
        }

        .reading h2 a {
            text-decoration: none;
            color: #59595b;
            font-size: 20px;
        }

        .reading h2 a:hover {
            color: #2183f1;
        }
    </style>
</head>

<body>
<div id="MyApp">
    <div class="main">
        <!--nr start-->
        <div class="test_main">
            <div class="nr_left">
                <div class="test">
                    <form action="" method="post">
                        <div class="test_title">
                            <p class="test_time">
                                <i class="icon iconfont">&#xe6fb;</i><b class="alt-1">01:40</b>
                            </p>
                            <font><input type="button" name="test_jiaojuan" @click="saveInfo" value="交卷"></font>
                        </div>

                        <div class="test_content">
                            <div class="test_content_title">
                                <h2>单选题</h2>
                                <p>
                                    <span>共</span><i
                                        class="content_lit">{{oneList.length}}</i><span>题，</span><span>合计</span><i
                                        class="content_fs">{{oneList.length*5}}</i><span>分</span>
                                </p>
                            </div>
                        </div>

                        <div class="test_content_nr">
                            <ul v-for="(x,index) in oneList">
                                <li :id="x.topicId">
                                    <div class="test_content_nr_tt">
                                        <i>{{index+1}}</i><span>({{x.score}}分)</span>
                                        <font>{{x.title}}</font><b class="icon iconfont">&#xe881;</b>
                                    </div>
                                    <div class="test_content_nr_main">
                                        <ul>
                                            <li class="option">
                                                <input type="radio" class="radioOrCheck" :name="['ra'+index]"
                                                       :id='[x.topicId+"A"]' :value='[x.topicId+":"+x.answer]+":"+"A"'/>
                                                <label :for='[x.topicId+"A"]'>
                                                    <p class="ue" style="display: inline;">{{x.optionA}}
                                                    </p>
                                                </label>
                                            </li>

                                            <li class="option">
                                                <input type="radio" class="radioOrCheck" :name="['ra'+index]"
                                                       :id='[x.topicId+"B"]' :value='[x.topicId+":"+x.answer]+":"+"B"'>
                                                <label :for='[x.topicId+"B"]'>
                                                    <p class="ue" style="display: inline;">{{x.optionB}}</p>
                                                </label>
                                            </li>
                                            <li class="option">
                                                <input type="radio" class="radioOrCheck" :name="['ra'+index]"
                                                       :id='[x.topicId+"C"]' :value='[x.topicId+":"+x.answer+":"+"C"]'/>
                                                <label :for='[x.topicId+"C"]'>
                                                    <p class="ue" style="display: inline;">{{x.optionC}}</p>
                                                </label>
                                            </li>
                                            <li class="option">
                                                <input type="radio" class="radioOrCheck" :name="['ra'+index]"
                                                       :id='[x.topicId+"D"]' :value='[x.topicId+":"+x.answer+":"+"D"]'/>
                                                <label :for='[x.topicId+"D"]'>
                                                    <p class="ue" style="display: inline;">{{x.optionD}}</p>
                                                </label>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </div>


                        <div class="test_content">
                            <div class="test_content_title">
                                <h2>多选题</h2>
                                <p>
                                    <span>共</span><i
                                        class="content_lit">{{twoList.length}}</i><span>题，</span><span>合计</span><i
                                        class="content_fs">{{twoList.length*5}}</i><span>分</span>
                                </p>
                            </div>
                        </div>
                        <div class="test_content_nr">
                            <ul v-for="(x,index) in twoList">

                                <li :id="x.topicId">
                                    <div class="test_content_nr_tt">
                                        <i>{{index+1}}</i><span>({{x.score}}分)</span>
                                        <font>{{x.title}}</font><b class="icon iconfont">&#xe881;</b>
                                    </div>

                                    <div class="test_content_nr_main">
                                        <ul>
                                            <li>
                                                <input type="checkbox" hidden="hidden" :name="['box'+index]"
                                                       :value='[x.topicId+":"+x.answer+":"]' checked="checked">
                                            </li>
                                            <li class="option">
                                                <input type="checkbox" class="radioOrCheck" :name="['box'+index]"
                                                       :id='[x.topicId+"A"]' value="A"/>
                                                <label :for='[x.topicId+"A"]'>
                                                    <p class="ue" style="display: inline;">{{x.optionA}}</p>
                                                </label>
                                            </li>
                                            <li class="option">
                                                <input type="checkbox" class="radioOrCheck" :name="['box'+index]"
                                                       :id='[x.topicId+"B"]' value="B"/>
                                                <label :for='[x.topicId+"B"]'>
                                                    <p class="ue" style="display: inline;">{{x.optionB}}</p>
                                                </label>
                                            </li>
                                            <li class="option">
                                                <input type="checkbox" class="radioOrCheck" :name="['box'+index]"
                                                       :id='[x.topicId+"C"]' value="C"/>
                                                <label :for='[x.topicId+"C"]'>
                                                    <p class="ue" style="display: inline;">{{x.optionC}}</p>
                                                </label>
                                            </li>
                                            <li class="option">
                                                <input type="checkbox" class="radioOrCheck" :name="['box'+index]"
                                                       :id='[x.topicId+"D"]' value="D"/>
                                                <label :for='[x.topicId+"D"]'>
                                                    <p class="ue" style="display: inline;">{{x.optionD}}</p>
                                                </label>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div class="test_content">
                            <div class="test_content_title">
                                <h2>判断题</h2>
                                <p>
                                    <span>共</span><i
                                        class="content_lit">{{zeroList.length}}</i><span>题，</span><span>合计</span><i
                                        class="content_fs">{{zeroList.length*5}}</i><span>分</span>
                                </p>
                            </div>
                        </div>
                        <div class="test_content_nr">
                            <ul v-for="(x,index) in zeroList">
                                <li :id="x.topicId">
                                    <div class="test_content_nr_tt">
                                        <i>{{index+1}}</i><span>({{x.score}}分)</span>
                                        <font>{{x.title}}</font><b class="icon iconfont">&#xe881;</b>
                                    </div>

                                    <div class="test_content_nr_main">
                                        <ul>
                                            <li class="option">
                                                <input type="radio" class="radioOrCheck" :name="['ju'+index]"
                                                       :id='[x.topicId+"T"]' :value='[x.topicId+":"+x.answer+":"+"A"]'/>
                                                <label :for='[x.topicId+"T"]'>
                                                    <p class="ue" style="display: inline;">True
                                                    </p>
                                                </label>
                                            </li>
                                            <li class="option">
                                                <input type="radio" class="radioOrCheck" :name="['ju'+index]"
                                                       :id='[x.topicId+"F"]' :value='[x.topicId+":"+x.answer+":"+"B"]'/>
                                                <label :for='[x.topicId+"F"]'>
                                                    <p class="ue" style="display: inline;">False
                                                    </p>
                                                </label>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div class="test_content">
                            <div class="test_content_title">
                                <h2>简答题</h2>
                                <p>
                                    <span>共</span><i
                                        class="content_lit">{{shortList.length}}</i><span>题，</span><span>合计</span><i
                                        class="content_fs">{{shortList.length*10}}</i><span>分</span>
                                </p>
                            </div>
                        </div>

                        <div class="test_content_nr">
                            <ul v-for="(x,index) in shortList">
                                <li :id='[x.shortTopicId+"S"]'>
                                    <div class="test_content_nr_tt">
                                        <i>{{index+1}}</i><span>({{x.score}}分)</span>
                                        <font>{{x.title}}</font><b class="icon iconfont">&#xe881;</b>
                                    </div>
                                    <div class="test_content_nr_main">
                                        <textarea rows="10" cols="50" :id="['short'+index]"></textarea>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </form>
                </div>

            </div>
            <div class="nr_right">
                <div class="nr_rt_main">
                    <div class="rt_nr1">
                        <div class="rt_nr1_title">
                            <h1>
                                <i class="icon iconfont">&#xe692;</i>答题卡
                            </h1>
                            <p class="test_time">
                                <i class="icon iconfont">&#xe6fb;</i><b class="alt-1">01:40</b>
                            </p>
                        </div>

                        <div class="rt_content">
                            <div class="rt_content_tt">
                                <h2>单选题</h2>
                                <p>
                                    <span>共</span><i class="content_lit">{{oneList.length}}</i><span>题</span>
                                </p>
                            </div>
                            <div class="rt_content_nr answerSheet">
                                <ul>
                                    <li v-for="(x,index) in oneList"><a :href='["#"+x.topicId]'>{{index+1}}</a></li>
                                </ul>
                            </div>
                        </div>

                        <div class="rt_content">
                            <div class="rt_content_tt">
                                <h2>多选题</h2>
                                <p>
                                    <span>共</span><i class="content_lit">{{twoList.length}}</i><span>题</span>
                                </p>
                            </div>
                            <div class="rt_content_nr answerSheet">
                                <ul>
                                    <li v-for="(x,index) in twoList"><a :href='["#"+x.topicId]'>{{index+1}}</a></li>
                                </ul>
                            </div>
                        </div>

                        <div class="rt_content">
                            <div class="rt_content_tt">
                                <h2>判断题</h2>
                                <p>
                                    <span>共</span><i class="content_lit">{{zeroList.length}}</i><span>题</span>
                                </p>
                            </div>
                            <div class="rt_content_nr answerSheet">
                                <ul>
                                    <li v-for="(x,index) in zeroList"><a :href='["#"+x.topicId]'>{{index+1}}</a></li>
                                </ul>
                            </div>
                        </div>

                        <div class="rt_content">
                            <div class="rt_content_tt">
                                <h2>简答题</h2>
                                <p>
                                    <span>共</span><i class="content_lit">{{shortList.length}}</i><span>题</span>
                                </p>
                            </div>
                            <div class="rt_content_nr answerSheet">
                                <ul>
                                    <li v-for="(x,index) in shortList"><a
                                            :href='["#"+x.shortTopicId+"S"]'>{{index+1}}</a></li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!--nr end-->
        <div class="foot"></div>
    </div>
</div>
<script src="http://cdn.bootstrapmb.com/jquery/jquery-1.11.1.min.js"></script>
<script src="/js/jquery.easy-pie-chart.js"></script>
<!--时间js-->
<script src="/js/jquery.countdown.js"></script>
<script src="/js/vue.js"></script>
<script>
    new Vue({
        el: "#MyApp",
        data: {
            zeroList: [],
            oneList: [],
            twoList: [],
            shortList: []
        },
        methods: {
            loadData: function () {
                var self = this;
                $.ajax({
                    url: "/oe/get_topic",
                    type: "get",
                    success: function (result) {
                        self.oneList = result.data.baseOneTopics;
                        self.twoList = result.data.baseTwoTopics;
                        self.zeroList = result.data.baseZeroTopics;
                        self.shortList = result.data.shortTopics;
                    }
                })
            },
            saveInfo: function () {
                //单选题，选中
                var ra = "";
                for (var i = 0; i < 5; i++) {
                    if (i == 4) {
                        ra += $("input[name='ra" + i + "']:checked").val()
                    } else {
                        ra += $("input[name='ra" + i + "']:checked").val() + ","
                    }
                }
                // console.log(ra)

                //多选题，选中
                var arr = new Array()
                for (var i = 0; i < 5; i++) {
                    var more = ""
                    $("input[name='box" + i + "']:checked").each(function () {
                        more += $(this).val()
                    })
                    arr.push(more)
                }
                var box = arr.toString()
                // console.log(arr.toString())

                //判断题，选中
                var ju = "";
                for (var i = 0; i < 5; i++) {
                    if (i == 4) {
                        ju += $("input[name='ju" + i + "']:checked").val()
                    } else {
                        ju += $("input[name='ju" + i + "']:checked").val() + ","
                    }
                }
                // console.log(ju)

                //简答题，取值
                var short1 = $("#short0").val()
                var answer1 = this.shortList[0].answer
                var shortTopicId1 = this.shortList[0].shortTopicId
                // console.log(answer1)
                var short2 = $("#short1").val()
                var answer2 = this.shortList[1].answer
                var shortTopicId2 = this.shortList[1].shortTopicId
                // console.log(answer2)
                var shortTopic = shortTopicId1 + "@" + answer1 + "@" + short1 + "@@" + shortTopicId2 + "@" + answer2 + "@" + short2
                $.ajax({
                    url: "/oe/put_answer",
                    type: "post",
                    data: {
                        "one": ra,
                        "two": box,
                        "zero": ju,
                        "shortTopic": shortTopic
                    },
                    success: function (result) {
                        alert(result.message)
                    }

                })
            }
        },
        mounted: function () {
            this.loadData();
        }
    })
</script>
<script>
    window.jQuery(function ($) {
        "use strict";
        $('time').countDown({
            with_separators: false
        });
        $('.alt-1').countDown({
            css_class: 'countdown-alt-1'
        });
        $('.alt-2').countDown({
            css_class: 'countdown-alt-2'
        });
    });

    $(function () {
        $('li.option label').click(function () {
            debugger;
            var examId = $(this).closest('.test_content_nr_main').closest('li').attr('id'); /*得到题目ID*/
            var cardLi = $('a[href=#' + examId + ']'); /*根据题目ID找到对应答题卡*/
            /*设置已答题*/
            if (!cardLi.hasClass('hasBeenAnswer')) {
                cardLi.addClass('hasBeenAnswer');
            }

        });
    });
</script>
</body>
</html>
<!--下面是无用代码-->
<a href="http://www.bootstrapmb.com" style="display:none">bootstrapmb</a>
